<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel=StyleSheet HREF="master.css" TYPE="text/css" MEDIA=screen/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery-css-transform.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<!--<script src="js/script.js"></script>-->
</head>

<style>

	#stage {
		width:600px;
		height:600px;
		margin:0 auto;
		outline:white 1px solid;
		position:relative;
		
	}

	#box {
		width:200px;
		height:200px;
		background-color:red;
		position:absolute;
		margin:40px 100px;
		position:absolute;
		z-index:50;

	}

	#status {
		color:#fff;
		width:300px;
		height:300px;
		margin-top:500px;
	}

	#mask {
		outline:blue 1px solid;
		width:100px;
		height:100px;
		position:absolute;
		left:30px;
		top:0;
		z-index:900;

	}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(document).mousemove(function(e){
   		var mousePos = e.pageX + e.pageY;
   		$('#mask').css('-webkit-mask-position', mousePos);
   		console.log(mousePos);
      //$('#status').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

	<div id="stage">

	<div id="box"></div>
	<div id="mask"><img src="images/mask.png"/></div>

	</div>
<h2 id="status">
0, 0
</h2>
</body>
</html>